<template>
	<view>
		<view class="detailedBox" v-for="(ele,ind) in listData" v-if="listData.length>0 && isShow==true"  :key="ind">
			<view class="detailedTotal">
				<view class="title">合计</view>
				<view class="amount">¥{{ele.TOTAL_BONUS}}</view>
			</view>
			<view class="detailedBoxItem">
				<view>
					<view>当期分红资格数</view>
					<view>{{ele.SENIORITY_NUMBER}}</view>
				</view>
				<view>
					<view>消费补贴(分红奖)</view>
					<view>{{ele.SHARE_BONUS}}</view>
				</view>
				<view v-if="ele.MANAGE_BONUS > 0">
					<view>管理补贴</view>
					<view>{{ele.MANAGE_BONUS}}</view>
				</view>
				<view v-if="ele.THANK_BONUS > 0">
					<view>感恩提成</view>
					<view>{{ele.THANK_BONUS}}</view>
				</view>
				<view>
					<view>奖励积分</view>
					<view>{{ele.REAL_BONUS}}</view>
				</view>
				<view>
					<view>重消积分</view>
					<view>{{ele.REPEAT_CURRENCY}}</view>
				</view>
				<view>
					<view>管理费</view>
					<view>{{ele.MANAGEMENT_EXPENSE}}</view>
				</view>
				<view>
					<view>周期</view>
					<view><{{ele.PERIOD}}> | {{ ele.START_DATE }} - {{ ele.END_DATE }}</view>
				</view>
			</view>
		</view>
		<view v-if="listData.length == 0 && isShow==true">
			<emptyPage title="暂无周结明细～"></emptyPage>
		</view>
	</view>
</template>

<script>
	import {
		getPeriodBonusData
	} from '@/api/directSelling.js'
	import emptyPage from '@/components/emptyPage.vue'
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				isShow:false,
				listData:[]
			}
		},
		created() {
			uni.showLoading({
				title: '查询中',
				mask: true
			});
			this.getPeriodBonusData();
		},
		methods: {
			getPeriodBonusData(){
				getPeriodBonusData({
					pageSize:100,
					pageNumber:1
				}
				).then((res)=>{
					let data=res.data.rows;
					this.listData=data;
					this.isShow=true;
					uni.hideLoading();
				}).catch((err)=>{
					
				})
			}
		}
	}
</script>

<style lang="scss">
	body,
	page {
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.detailedBox {
		width: 100%;
		height: auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 10px #e6e6e6;
		border-radius: 21rpx;
		margin-bottom:30rpx;
		.detailedTotal {
			text-align: center;

			.amount {
				font-size: 56rpx;
				font-weight: bold;
				margin-top: 25rpx;
				margin-bottom: 20rpx;
			}
		}

		>view.detailedBoxItem>view {
			display: flex;
			justify-content: space-between;
			line-height: 45rpx;
			font-size: 30rpx;
			margin-top: 25rpx;
		}
	}
</style>
